<!--数据预览-->
<template>
  <div>
    <el-card shadow="never">
      <el-row :gutter="15" class="row-cls">
        <el-col :xs="8" :sm="8" :lg="8" :xl="8" v-for="(i,j) in list" :key="j">
          <div class="flex-column screen-num" :style=" j==1 ? 'border-left: 1px solid #EBEBEB;border-right: 1px solid #EBEBEB' : ''">
            <span>{{i.text}}</span>
            <div>{{i.num}}</div>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <el-card shadow="never">
      <div class="flex-between">
        <div class="d-title">数据概览</div>
        <div :class="['ele-inline-block', { 'hidden-xs-only': styleResponsive }]">
          <el-radio-group v-model="saleSearch.dateType" @change="onSearchTypeChange">
            <!--<el-radio-button :label="0">全部</el-radio-button>-->

            <!--<el-radio-button :label="1">昨日</el-radio-button>
            <el-radio-button :label="2">7天</el-radio-button>
            <el-radio-button :label="3">30天</el-radio-button>-->

            <el-radio-button :label="0">全部</el-radio-button>
            <el-radio-button :label="1">昨天</el-radio-button>
            <el-radio-button :label="2">今天</el-radio-button>
            <el-radio-button :label="3">一周内</el-radio-button>
            <el-radio-button :label="4">一个月内</el-radio-button>
          </el-radio-group>
        </div>
      </div>
      <el-card shadow="never" style="background-color: #fbfbfb;margin: 20px 10px 0;padding: 10px 0" v-for="(item,index) in dataList" :key="index">
        <div class="flex-align-center">
          <div class="flex-column m-left20 left-img">
            <img class="m-bottom10" :src="item.img" />
            <div>{{item.title}}</div>
          </div>
          <div class="divider"></div>
          <div class="flex1 flex-align-center">
            <div class="task-number" v-for="(i,j) in item.list" :key="j">
              <el-popover
                placement="top"
                width="300"
                trigger="hover"
                :content="i.hint">
                <div slot="reference">{{i.name}}<i class="el-icon-_question"></i></div>
              </el-popover>
              <span>{{i.num}}</span>
            </div>
          </div>
        </div>
      </el-card>
    </el-card>
  </div>
</template>

<script>
  import {getActivity} from "@/api/explosiveCode/releaseActivity";
  import { projectQuery ,overallPlatformStatistics } from "@/api/creatCenter/authoringClips";
  import {queryMatrix} from "@/api/matrixManage/groupManage";
  export default {
    name: "dataPreview",
    data(){
      const defaultForm = {};
      return{
        defaultForm,
        form: { ...defaultForm },
        list:[
          {
            text:'曝光量',
            num:0
          },{
            text:'点赞数',
            num:0
          },{
            text:'评论数',
            num:0
          },
        ],
        // 销售量搜索参数
        saleSearch: {
          type: 'reserveOrder',
          dateType: 0,
          datetime: ''
        },
        dataList:[
          {
            title:'创作剪辑',
            img:require('/src/assets/index1.png'),
            list:[
              {
                name:'剪辑任务数',
                num:0,
                hint:'所选时间范围内，新建的剪辑任务条数'
              },
              {
                name:'可剪辑视频数',
                num:0,
                hint:'所选时间范围内，可剪辑的视频条数'
              },
              {
                name:'已剪辑视频数',
                num:0,
                hint:'所选时间范围内，已剪辑的视频数'
              },
              {
                name:'最多剪辑视频数',
                num:0,
                hint:'所选时间范围内，最多剪辑的视频条数'
              },
            ]
          },
          {
            title:'矩阵管理',
            img:require('/src/assets/index2.png'),
            list:[
              {
                name:'发布任务数',
                num:0,
                hint:'所选时间范围内，新建的发布任务条数'
              },
              {
                name:'发布视频数',
                num:0,
                hint:'所选时间范围内，发布的视频条数'
              },
              {
                name:'未发布视频数',
                num:0,
                hint:'所选时间范围内，未发布的视频条数'
              },
              {
                name:'视频曝光量',
                num:0,
                hint:'所选时间范围内，发布任务的视频曝光量'
              },
            ]
          },
          {
            title:'爆客码',
            img:require('/src/assets/index3.png'),
            list:[
              {
                name:'新建活动数',
                num:0,
                hint:'所选时间范围内，新建的活动条数'
              },
              {
                name:'参与用户',
                num:0,
                hint:'所选时间范围内，活动参与用户数量'
              },
              {
                name:'发布视频数',
                num:0,
                hint:'所选时间范围内，活动发布视频条数'
              },
              {
                name:'活动曝光量',
                num:0,
                hint:'所选时间范围内，活动的曝光量'
              },
            ]
          }
        ]
      }
    },
    computed: {
      // 是否开启响应式布局
      styleResponsive() {
        return this.$store.state.theme.styleResponsive;
      }
    },
    activated(){
      this.dataQuery()
      this.init()
    },

    methods: {
      // 曝光量，点赞数，评论数查询
      dataQuery(){
        overallPlatformStatistics(this.$store.state.user.info.merchantId)
          .then((data) => {
            console.log("曝光量，点赞数，评论数查询",data)
            this.list[0].num=data.exposure ? data.exposure : 0  // 曝光量
            this.list[1].num=data.likeCount ? data.likeCount : 0  // 点赞数
            this.list[2].num=data.numberComments ? data.numberComments : 0  // 评论数
          })
      },
      init(){
        // 创作中心
        let createInfo = {}
        Object.assign(createInfo, this.form, {
          merchantId: this.$store.state.user.info.merchantId,
          max:1
        })

        // 创作中心
        projectQuery(createInfo)
          .then((data) => {
            console.log("aaaaaaaaaaaaaaaaaaaaa创作中心非分页返回====",data,data.length)
            let num=0,useNum=0,maxNum = 0,haveNum=0
            for(let i=0;i<data.length;i++){
              console.log('data[i].max',data[i].max,data[i].montageCount,data[i].maximumCount)
              num+=data[i].max
              useNum+=data[i].isCount
              maxNum+=data[i].maximumCount
              // haveNum+=data[i].isCount
              console.log('num,useNum,maxNum',num,useNum,maxNum)

            }
            this.dataList[0].list[0].num=data.length
            this.dataList[0].list[1].num=Number(num) - Number(useNum) //可剪辑视频数 = 最多剪辑视频数 - 已剪辑视频数
            this.dataList[0].list[2].num=useNum//已剪辑视频数
            this.dataList[0].list[3].num=num//最多剪辑视频数
          })



        // 矩阵
        let publishInfo = {}
        Object.assign(publishInfo, this.form, {
          merchantId: this.$store.state.user.info.merchantId,
          username:this.$store.state.user.info.username
        })
        // 矩阵
        queryMatrix(publishInfo)
          .then((data) => {
            /*let unpublishedCount=0,releaseCount=0,viewCount = 0
            for(let i=0;i<data.length;i++){
              console.log('data[i].max',data[i].max,data[i].montageCount,data[i].maximumCount)
              unpublishedCount+=data[i].unpublishedCount
              releaseCount+=data[i].releaseCount
              viewCount+=data[i].viewCount
              console.log('num,useNum,maxNum',num,useNum,maxNum)

            }
            this.dataList[1].list[0].num=data.length
            this.dataList[1].list[2].num=unpublishedCount
            this.dataList[1].list[1].num=releaseCount
            this.dataList[1].list[3].num=viewCount*/

            let daiPublish=Number(data.tasksCount)-Number(data.videosPostedCount)
            this.dataList[1].list[0].num=data.tasksCount
            this.dataList[1].list[1].num=data.videosPostedCount
            this.dataList[1].list[2].num=daiPublish>0 ?daiPublish : 0
            this.dataList[1].list[3].num=data.exposureCount
          })


        // ‘爆店码’活动
        getActivity({
          id: this.$store.state.user.info.merchantId
        })
          .then((data) => {
            /*let accountCount=0,releaseCount=0,viewCount = 0
            for(let i=0;i<data.length;i++){
              console.log('data[i].max',data[i].max,data[i].montageCount,data[i].maximumCount)
              // shopCount 活动数 bgCount曝光量 fbCount发布视频数 yhCount用户数
              allCount+=data[i].shopCount
              accountCount+=data[i].yhCount
              releaseCount+=data[i].fbCount
              viewCount+=data[i].bgCount
              console.log('num,useNum,maxNum',num,useNum,maxNum)
            }*/

            this.dataList[2].list[0].num=data.shopCount
            this.dataList[2].list[1].num=data.yhCount
            this.dataList[2].list[2].num=data.fbCount
            this.dataList[2].list[3].num=data.bgCount

            /*old
            this.dataList[2].list[0].num=data.length
            this.dataList[2].list[1].num=accountCount
            this.dataList[2].list[2].num=releaseCount
            this.dataList[2].list[3].num=viewCount
            */

          })
      },
      onSearchTypeChange(e) {
        console.log("e", e)
        var date = new Date();
        this.form = { ...this.defaultForm }
        // 0：全部  1：昨天  2：今天  3：一周内  4：一个月内
        if(e==1){
          var list = this.$sun.getDateRange(date,1,true)
          console.log("获取昨天日期范围：\n开始日期:"+list[0]+";\n结束日期:"+list[0]);
          // this.form.staTime = e
          this.form.startTime = list[0] + ' 00:00:00'
          this.form.endTime = list[1] + ' 23:59:59 '
        }
        else if(e==2){
          var list = this.$sun.getDateRange(date,0,true)
          console.log("获取今天日期范围：\n开始日期:"+list[0]+";\n结束日期:"+list[1]);
          this.form.startTime = list[0] + ' 00:00:00'
          this.form.endTime = list[1] + ' 23:59:59 '
        }
        else if(e==3){
          var list = this.$sun.getDateRange(date,6,true)
          console.log("获取近一周日期范围：\n开始日期:"+list[0]+";\n结束日期:"+list[1]);
          this.form.startTime = list[0] + ' 00:00:00'
          this.form.endTime = list[1] + ' 23:59:59 '
        }
        else if(e==4){
          var list = this.$sun.getDateRange(date,30,true)
          console.log("获取近一个月日期范围：\n开始日期:"+list[0]+";\n结束日期:"+list[1]);
          this.form.startTime = list[0] + ' 00:00:00'
          this.form.endTime = list[1] + ' 23:59:59'
        }
        else{
          this.form = { ...this.defaultForm }
        }

        console.log('选择时间this.form', this.form)

        this.init()

      },
    }
  }
</script>

<style scoped lang="less">
  /*总数量统计 start*/
  .row-cls{
    margin: 5px 0;
  }
  .screen-num{
    span{
      color: #666;
    }
    div{
      color: #1E6CEB;
      font-size: 24px;
      margin-top: 10px;
    }
  }
  /*end*/

  .left-img{
    img{
      width: 48px;
    }

    width: 70px;
  }
  /*分割线*/
  .divider{
    height: 60px;
    margin: 0 35px;
    background-color: rgb(239, 239, 245);
    display: inline-block;
    vertical-align: middle;
    width: 1px;
  }
  .task-number{
    width: calc(100%/4);
    div{
      width: 130px;
      font-size: 14px;
      margin-bottom: 12px;
      color: rgb(118, 124, 130);
      i{
        font-size: 14px;
        margin-left: 6px;
      }
    }
    span{
      color: rgb(51, 54, 57);
      font-size: 24px;
    }
  }
</style>
